<template>
   <section class="index-center-wrapper">
      <div v-if="list.length">
         <ul ref="elemtul">
            <li v-for="(item,index) of dataList" :key="index" @click="_selectorName(item.iphomeNames)">
               <router-link :data-id="item.id" :to="navigationField !== '' ? navigationField + item.id : '' ">
                  <img ref="replaceImg" :style="styleString" v-lazy="item.src" alt="">
                  <thumbnail-box :thumbnail="item"
                                 @replaceSrc="_replaceSrc"
                                 :index='index'
                  ></thumbnail-box>
                  <p>{{item.goodsName || item.iphomeNames || item.listName}}</p>
                  <p :style="describeStyle">{{item.goodsDesc || item.describe}}</p>
                  <p class="price">{{item.goodsPrice || item.price }}</p>
               </router-link>
            </li>
         </ul>
      </div>
   </section>
</template>

<script>
   import thumbnailBox from '../thumbnail-box/thumbnail-box'
   import {mapMutations, mapGetters} from 'vuex'

   export default {
      name: 'sectionBoxCommon',
      data() {
         return {
            list: []
         }
      },
      props: {
         dataList: {
            type: Array,
            required: true,
            default: null
         },
         styleString: {
            type: String,
            default: ''
         },
         describeStyle: {
            type: Object,
            default() {
               return {
                  color: 'red',
                  boxSizing: 'border-box',
                  padding: '0 20px',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  imgWrap: false
               }
            }
         }
      },
      computed: {
         ...mapGetters([
            'navigationField'
         ])
      },
      mounted() {
         // this._initElement()
         this.list = this.dataList
      },
      methods: {
         _initElement() {
            if (!this.list.length) return
            let elem = this.$refs.elemtul.children
            if (elem.length > 4) {
               let elemArr = Array.from(elem).slice(0, -4)
               elemArr.forEach((item, index) => {
                  item.style.cssText = `
                  margin-bottom: 10px;
               `
               })
            }
         },
         _selectorName(name) {
            this.setCrumbsName(name)
         },
         _replaceSrc(src, index) {
            console.log(src)
            console.log(index)
            this.$refs.replaceImg[index].src = src
            console.log()
         },
         ...mapMutations({
            setCrumbsName: 'crumbsName'
         })
      },
      components: {
         thumbnailBox
      },
      watch: {
         list: {
            handler() {
               this.$nextTick(() => {
                  this._initElement()
               })
            }
         }
      }
   }
</script>

<style scoped lang="stylus">
   .index-center-wrapper
      margin-bottom 40px
      h1
         font-size 30px
         font-weight 400
      ul
         margin-top 20px
         display flex
         flex-wrap wrap
         li:not(:nth-child(4n+0))
            margin-right 8px
         li
            a
               box-sizing border-box
               padding-top 30px
               display block
               background #fff
               min-height 400px
               width 303px
               text-align center
               transition all 1s
               box-shadow 0 0 0 transparent
               img
                  margin-bottom 30px
                  height 230px
                  width 116px
               &:hover
                  box-shadow 1px 1px 16px #666

   p:nth-child(3)
      color #666
      font-size 14px
      margin 5px 0

   p.price
      font-size 19px
      font-weight bold
      color red
</style>
